<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--CSS样式-->

		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/vegas.min.css"/>
		<link rel="stylesheet" href="skin/layer.css" />
		<link rel="stylesheet" type="text/css" href="css/list.css"/>
		<link href="css/animate.css" rel="stylesheet"/>
		<!--JS样式表-->
		<script type="text/javascript" src="js/jquery-3.1.0.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="js/vegas.min.js" ></script>
		<script type="text/javascript" src="js/layer.js" ></script>
		<script type="text/javascript" src="js/list.js" ></script>
		<style>
			input, button{outline:none;}
			.color:hover{color:#f0ad4e;}
			.swing-1:hover{color:#dc4e41;}
			.on, .on-1{transition:1s all ease; }
			.on:hover{transform:scale(1.05); }
			.on-1:hover{transform:scale(1.2);}
			.on-1:hover{transform:scale(1.2);}
			.image .wid{width:282.5px; height:282.5px;}
		</style>
	</head>
	<body>
		<header>
			<div class="container">
				<nav class="navbar navbar-static-top">
					<div class="navbar-header col-sm-6 animated bounceInLeft ">
						<a href="">我的简历</a>
					</div>
					<div class="navbar-right col-sm-6">
						<ul id="nav">
							<li class="animated  swing"><a class="swing-1"  href="index.html">首页</a></li>
							<li  class="animated  swing "><a class="swing-1" href="#skills">关于</a></li>
							<li  class="animated swing"><a class="swing-1" href="#portfolio">展示</a></li>
							<li  class="animated swing"><a class="swing-1" href="#gallery">萌宠</a></li>
							<li class="animated swing"><a class="swing-1" href="#contect">联系</a></li>
						</ul>
					</div>
				</nav>
				<div class="row title">					
					<div class="col-sm-9 col-sm-offset-3">
						<div class="col-sm-6 col-sm-offset-4">
							<div class="on-1">
								<h3 >生活方式</h3>
							</div>
							<p style="text-align:center;"> 精彩人生，完美自己！</p>
							<div class="icon">
								<span class="facebook"></span>
								<span class="twitter"></span>
								<span class="linkedin"></span>
								<span class="googleplus"></span>
							</div>
						</div>										
					</div>					
				</div>
			</div>
		</header>
		<section id="skills">
			<div class="container">
				<div class="row">
					<div class="page-header">
						<h3>关于我的技能</h3>
					</div>
				</div>
				<div class="row">
					<div class="col-md-4 col-xs-12 skill-left">
						<div class="name">
							<img class="on" src="img/person.jpg"/>
							<h3>唐志刚</h3>
							<p>前端工程狮</p>
							<div class="icon">
								<span class="facebook"></span>
								<span class="twitter"></span>
								<span class="linkedin"></span>
								<span class="googleplus"></span>
							</div>
						</div>
					</div>
					<div class="col-md-8 col-xs-12">
						<div class="info">
							<div class="page-header">
								<h3 style="padding-top:10px;">我的技能信息</h3>
							</div>
							<p style="font-size:16px; ">对WEB充满热情,学生时代就踏上了开发之路 !</p>
							<ul>
								<li>
									<h4>HTML5</h4>
									<div class="ps progress" style="width:400px;">
										<div class="progress-bar-success progress-bar-striped" style="width:80%;height:30px;text-align: center;"><span>80%</span></div>								
									</div>
								</li>
								<li>
									<h4>VUE</h4>
									<div class="ps progress" style="width:400px;">
										<div class="progress-bar-info progress-bar-striped" style="width:82%;height:30px;text-align: center;"><span>82%</span></div>								
									</div>
								
								</li>
								<li>
									<h4>JQUERY</h4>
									<div class="ps progress" style="width:400px;">
										<div class="progress-bar-danger progress-bar-striped" style="width:90%;height:30px;text-align: center;"><span>90%</span></div>								
									</div>
									
								</li>
								<li>
									<h4>JS</h4>
									<div class="ps progress" style="width:400px;">
										<div class="progress-bar-success progress-bar-striped" style="width:95%;height:30px;text-align: center;"><span>95%</span></div>								
									</div>
									
								</li>
								<li>
									<h4>SASS</h4>
									<div class="ps progress" style="width:400px;">
										<div class="progress-bar-warning progress-bar-striped" style="width:88%;height:30px;text-align: center;"><span>88%</span></div>								
									</div>
								</li>
							</ul>
						</div>						
					</div>
				</div>
			</div>
		</section>
		<section id="portfolio">
			<div class="container">
				<div class="row">
					<div class="page-header">
						<h3>精彩动效</h3>
					</div>
					<p>我最近的项目，只是“点击”他们，了解更多。</p>
				</div>
				<div class="row image">
					<div class="col-md-4 thumbnail">
						<img index="0" src="img/1.jpg"/>
						<p>轮播图效果点这里！！！</p>
					</div>
					<div class="col-md-4 thumbnail">
						<img index="1" src="img/2.jpg"/>
						<p>放大镜效果点这里！！！</p>
					</div>
					<div class="col-md-4 thumbnail">
						<img index="0" src="img/3.jpg"/>
						<p>轮播图效果点这里！！！</p>
					</div>
				</div>
			</div>
		</section>
		<section id="gallery">
			<div class="container" id="g-img">
				<div class="page-header">
					<h3>我的图片库</h3>
				</div>
				<div class="row image">
					<div class="col-md-3 thumbnail">
						<img class="wid" src="img/t-5.jpg" />
					</div>
					<div class="col-md-3 thumbnail">
						<img class="wid" src="img/t-6.jpg" />
					</div>
					<div class="col-md-3 thumbnail">
						<img class="wid" src="img/t-7.jpg" />
					</div>
					<div class="col-md-3 thumbnail">
						<img class="wid" src="img/t-8.jpg" />
					</div>
				</div>
				<div class="row image">
					<div class="col-md-3 thumbnail">
						<img class="wid" src="img/t-4.jpg"/>
					</div>
					<div class="col-md-3 thumbnail">
						<img class="wid" src="img/t-2.jpg"/>
					</div>
					<div class="col-md-3 thumbnail">
						<img class="wid" src="img/t-3.jpg"/>
					</div>
					<div class="col-md-3 thumbnail">
						<img class="wid" src="img/t-1.jpg"/>
					</div>
				</div>
				<div class="row image">
					<div class="col-md-3 thumbnail">
						<img class="wid" src="img/t-12.jpg"/>
					</div>
					<div class="col-md-3 thumbnail">
						<img class="wid" src="img/t-10.jpg"/>
					</div>
					<div class="col-md-3 thumbnail">
						<img class="wid" src="img/t-11.jpg"/>
					</div>
					<div class="col-md-3 thumbnail">
						<img class="wid" src="img/t-9.jpg"/>
					</div>
				</div>
			</div>
		</section>
		<section id="contect">
			<div class="container">
				<div class="row">
					<div class="page-header">
						<h3>联系我</h3>
					</div>
					<p class="color">我在等一个人，也许我和他在春风里遇见，然后默然擦肩，也许他走过十里河山，万里晴空，才与我恍然邂逅！</p>
				</div>
				<div class="row">
					<div class="col-md-6">
						<h3>您的信息</h3>
						<div class="input-group input-group-lg form">
           					<span class="input-group-addon"><i class="fa fa-user"></i></span>
            				<input id="name" type="text" class="form-control" placeholder="请填写你的姓名">     					
						</div> 
						<p class="red" id="n-con"></p>
        				<div class="input-group input-group-lg form">
           					<span class="input-group-addon"><i class="fa fa-send"></i></span>
            				<input id="e-mail" type="text" class="form-control" placeholder="请填写你的邮箱">
        				</div>
        				<p class="red" id="e-con"></p>
        				<div class="input-group input-group-lg form">
           					<span class="input-group-addon"><i class="fa fa-phone"></i></span>
            				<input id="phone" type="text" class="form-control" placeholder="请填写你的电话">
        				</div>
        				<p class="red" id="p-con"></p>
        				<div class="input-group input-group-lg form">
           					<span class="input-group-addon"><i class="fa fa-qq"></i></span>
            				<input id="qq" type="text" class="form-control" placeholder="请填写你的QQ">         				
        				</div>
        				<p class="red" id="q-con"></p>
					</div>
					<div class="col-md-6 my-con">
						<h3>联系方式</h3>
						<div>
							<i class="fa fa-globe fa-3x" style="margin-left:90px; "></i>
							<div class="address">
								<p>杰克街77号</p>
								<p>海拉尔,中国</p>
							</div>
						</div>
						<div>
							<i class="fa fa-phone fa-3x" style="margin-left:90px; "></i>
							<div class="phone">
								<p>177-1049-3475</p>
							</div>
						</div>
						<div>
							<i class="fa fa-envelope fa-3x" style="margin-left:90px; "></i>
							<div class="mail">
								<p>310671345@qq.com</p>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</section>
		<hr>
		<footer>
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<p>Copyright © 2016.Company name All rights reserved.cyz</p>
					</div>
				</div>
			</div>
		</footer>
		<!--回到顶部-->
		<div id="top">
			<i class="fa fa-angle-double-up fa-3x"></i>
		</div>
		<!--轮播效果-->
		<div id="banner">				
			<div class="cover hidden-xs">
				<img id="pre" src="img/prev.png"/>
				<img id="next" src="img/next.png"/>
				<ul id="banner-img">
					<li style="display:block;"><img src="img/banner1.jpg"/></li>
					<li><img src="img/banner2.jpg"/></li>
					<li><img src="img/banner3.jpg"/></li>
				</ul>
				<div id="spot">
					<ul>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>		
		</div>
		<!--轮播效果结束-->
		<!--放大镜效果-->
		<div id="fada">
			<div class="row">
				<div class="col-md-6 thumbnail">
					<div id="small">
						<img src="img/banner3.jpg"/>
					</div>			
				</div>
				<div class="col-md-6 thumbnail">
					<div id="big">
						<img src="img/banner3.jpg"/>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
